<template>
  <view class="login-wrap" :data-theme="globPrimary">
    <u-navbar title="注册" :custom-back="back"></u-navbar>
    <u-form :model="reset" ref="resetForm" :error-type="errorType" label-width="160rpx">
      <u-form-item label="设置密码" prop="password"
        ><u-input
          :password-icon="true"
          type="password"
          v-model="reset.password"
          placeholder="请输入密码"
        ></u-input
      ></u-form-item>
      <u-form-item label="确认密码" prop="rePassword">
        <u-input
          :password-icon="true"
          type="password"
          v-model="reset.rePassword"
          placeholder="请再次输入密码"
        ></u-input>
      </u-form-item>
    </u-form>
    <u-alert-tips
      :show-icon="true"
      description="密码长度为6~20个字符，区分大小写"
      icon="error-circle-fill"
      :desc-style="{
        color: '#909399',
      }"
      :icon-style="{
        color: '#B7BAC1',
      }"
    ></u-alert-tips>
    <view class="reset-btn">
      <edu-button type="primary" @click="$u.debounce(handleResetSubmit, 500)">注册</edu-button>
    </view>
    <view class="agreement">
      <u-checkbox
        v-model="check"
        size="28"
        @change="checkboxChange"
        :active-color="globPrimaryColor"
        >我已阅读并同意</u-checkbox
      >
      <text
        class="agreement-text"
        :style="{ color: globPrimaryColor }"
        @click="
          $u.route('/pages/protocol', {
            key: 'userRegister',
          })
        "
      >
        《{{ getAgreementTitle('userRegister') }}》
      </text>
    </view>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
import md5Libs from '@/uview-ui/libs/function/md5'
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      reset: {
        agreement: false,
        password: '',
        rePassword: '',
      },
      check: false,
      rulesReset: {
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: ['change', 'blur'],
          },
          {
            validator: (rule, value, callback) => {
              return this.$edu.test.password(value)
            },
            message: '长度在6-20之间',
            trigger: ['change', 'blur'],
          },
        ],
        rePassword: [
          {
            required: true,
            message: '请重新输入密码',
            trigger: ['change', 'blur'],
          },
          {
            validator: (rule, value, callback) => {
              return value === this.reset.password
            },
            message: '两次输入的密码不相等',
            trigger: ['change', 'blur'],
          },
        ],
      },
      errorType: ['message'],
    }
  },
  computed: {
    ...mapGetters({
      globPrimary: 'designSetting/getGlobTheme',
      globPrimaryColor: 'designSetting/getGlobThemeColor',
      getAgreementTitle: 'projectSetting/getAgreementTitle',
    }),
  },
  options: { styleIsolation: 'shared' },
  methods: {
    // 注册-设置密码
    handleResetSubmit() {
      this.$refs.resetForm.validate((valid) => {
        if (valid) {
          if (this.reset.agreement) {
            this.$edu.api
              .createUserAccountPwdSet({
                password: md5Libs.md5(this.reset.password),
              })
              .then((res) => {
                this.back()
              })
          } else {
            this.$u.toast(`请阅读${this.getAgreementTitle('userRegister')}`)
          }
        }
      })
    },
    // 勾选版权协议
    checkboxChange(e) {
      this.reset.agreement = e.value
    },
    back() {
      this.$u.route({
        type: 'back',
        delta: 3,
      })
    },
  },
  // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
  onReady() {
    this.$refs.resetForm.setRules(this.rulesReset)
  },
}
</script>

<style lang="scss" scoped>
.login-wrap {
  padding: 0 30rpx;
  height: calc(100vh);
  /* #ifdef H5 */
  height: calc(100vh - var(--window-top));
  /* #endif */
  background-color: #fff;
  /deep/.u-form-item {
    color: #606266;
    .u-form-item--left__content {
      flex-direction: row-reverse;
    }
  }
  .u-alert-tips {
    margin-top: 16rpx;
    border: none;
    padding-left: 0;
    padding-right: 0;
    background-color: #fff;
  }
  .reset-btn {
    margin-top: 100rpx;
  }
  .loginBtn {
    height: 80rpx;
    width: 690rpx;
    margin: 54rpx auto 0;
    text-align: center;
    line-height: 80rpx;
    color: white;
    font-size: 30rpx;
    text-align: center;
    border-radius: 10rpx;
  }
  .agreement {
    margin-top: 30rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    ::v-deep .u-checkbox {
      display: flex;
      line-height: 1;
    }
    ::v-deep .u-checkbox__label {
      margin-right: 0;
      font-size: 26rpx;
    }
    .agreement-text {
      color: $edu-content-color;
      font-weight: 400;
      font-size: 26rpx;
      @include text-color();
    }
  }
}
</style>
